<template>
  <div class="search_container">
    <header>
      <form>
        <van-search
          v-model="searchValue"
          show-action
          clearable
          placeholder="请输入搜索关键词"
          background="#3296fa"
          @search="submitSearchValue"
          @cancel="searchClose"
          @focus="searchFocus"
          @input="searchInp"
        />
      </form>
    </header>
    <section>
      <search-result
        v-show="resultIsShow"
        :resultVlaueLists="resultVlaueLists"
        :queryInfo="queryInfo"
        @onLoad="onLoad"
        :finished="finished"
        :loading="loaded"
      ></search-result>
      <search-suggestion
        v-show="suggestionIsShow"
        :searchValue="searchValue"
        @searchSuggestionValueChange="searchSuggestionValueChange"
        :suggestionValues="suggestionValues"
        @suggestionClick="suggestionClick"
      ></search-suggestion>
      <search-history
        v-show="historyIsShow"
        :historyValues="historyValues"
        @claerAllHistoryValues="claerAllHistoryValues"
        @removeValueByIndex="removeValueByIndex"
        @historyCellClick="historyCellClick"
      ></search-history>
    </section>
  </div>
</template>

<script>
import SearchHistory from './components/SearchHistory'
import SearchResult from './components/SearchResult'
import SearchSuggestion from './components/SearchSuggestion'
import getToken from '../../untils/getToken'
import setToken from '../../untils/setToken'
import { apiGetSuggestion, apiGetResultValue } from '@/network/index.js'
export default {
  name: 'Search',
  data () {
    return {
      searchValue: '',
      historyValues: [],
      suggestionValues: [],
      resultIsShow: false,
      suggestionIsShow: false,
      historyIsShow: true,
      queryInfo: {
        page: 1,
        per_page: 15,
        q: ''
      },
      resultVlaueLists: [],
      // 是否全部加载完毕
      finished: false,
      // 是否单次加载完成
      loaded: false
    }
  },
  created () {
    let lists = getToken('search_token')
    if (typeof lists === 'string') {
      lists = JSON.parse(lists)
      this.historyValues = lists
      lists = null
    }
  },
  methods: {
    // searchSuggestion子组件拿到的最新值发送请求
    async searchSuggestionValueChange (value) {
      this.searchValue = value
      try {
        if (value.trim().length) {
          const res = await apiGetSuggestion(value)
          const { data: { data: { options: lists } } } = res
          this.suggestionValues = lists
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取搜索结果的函数
    async getSearchResultValues (queryInfo) {
      try {
        const res = await apiGetResultValue(queryInfo)

        const { data: { data: { results: lists } } } = res
        if (lists.length === 0) {
          return (this.finished = true)
        }
        this.resultVlaueLists.push(...lists)
        this.loaded = false
        this.historyIsShow = false
        this.resultIsShow = true
        console.log(lists.length)
      } catch (err) {
        console.log(err)
      }
    },
    // 搜索框输入事件
    searchInp () {
      this.resultVlaueLists.length = 0
      if (this.searchValue.trim().length === 0) {
        this.historyIsShow = true
        this.suggestionIsShow = false
      } else {
        this.historyIsShow = false
      }
    },
    submitSearchValue (value) {
      this.queryInfo.q = this.searchValue
      this.searchValue = ''
      this.getSearchResultValues(this.queryInfo)
      const index = this.historyValues.findIndex(item => item === value)
      if (index !== -1) {
        this.historyValues.splice(index, 1)
      }
      this.historyValues.unshift(value)
      this.resultIsShow = true
      this.suggestionIsShow = false
    },
    searchClose () {
      this.$router.back()
      setToken('search_token', this.historyValues)
      this.suggestionIsShow = false
      this.historyIsShow = true
    },
    // 删除所有
    claerAllHistoryValues () {
      this.historyValues.length = 0
    },
    // 删除单个value
    removeValueByIndex (index) {
      this.historyValues.splice(index, 1)
    },
    // 监听result子组件中的下拉事件，发送请求
    onLoad (page) {
      this.queryInfo.page = page
      this.getSearchResultValues(this.queryInfo)
    },
    // 搜索框聚焦后让result组件隐藏,清除数resultVlaueLists组中的值
    searchFocus () {
      this.historyIsShow = false
      this.resultIsShow = false
      this.suggestionIsShow = true
      this.resultVlaueLists.length = 0
    },
    // 点击历史记录组件发送请求
    historyCellClick (queryQ) {
      this.queryInfo.q = queryQ
      this.getSearchResultValues(this.queryInfo)
    },
    // 建议搜索的单元格点击事件
    suggestionClick (queryQ) {
      this.queryInfo.q = queryQ
      this.getSearchResultValues(this.queryInfo)
      this.suggestionIsShow = false
    }
  },
  components: {
    SearchHistory,
    SearchResult,
    SearchSuggestion
  }
}
</script>

<style lang="less" scoped>
.search_container {
  header {
    form {
      .van-search {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
        .van-search__action {
          font-size: 30px;
          color: #fff;
        }
      }
    }
  }
  section {
    padding-top: 108px;
  }
}
</style>
